<template>
	<view class="rig-con">
		123132
		<primers :curIndex='curIndex' :menuList='menuList' :primetrs="primetrs" />
	</view>
</template>

<script>
	import primers from './right/primers.vue'
	// import soupList from '@/components/soupList.vue'
	export default {
		name: "rightContent",
		components: {
			primers
			// soupList
		},

		props: {
			curIndex: Number,
			menuList: Array,
			primetrs: Object
		},
		data() {
			return {};
		},
		methods: {}
	}
</script>

<style scoped lang="scss">
	.rig-con {
		display: flex;
		flex: 1;
		/* background-color: red; */
	}

	.primers-c {
		display: flex;
		flex: 1;

	}

	.pot {
		display: flex;
		flex: 1;
		flex-direction: column;
		// justify-content: center;
		color: $uni-text-color;
		padding: 16px 0;
		align-items: center;
	}

	.primers-menu {
		width: 340px;
		display: flex;
		background: $qy-bg-nav-option-color;
		padding: 16px 24px;
		z-index: 2;
		flex-direction: column;

		.SoupBase-name {
			color: $qy-text-color-title;
			font-size: 20px;
		}
	}

	.select-title {
		color: $qy-text-color-title;
		font-size: 20px;
	}

	// .select-guo{
	// 	width: 100%;
	// 	display: flex;
	// 	flex-direction: column;
	// 	align-items: center;
	// }

	.select-soup {
		margin-top: 30px;
		display: flex;
		height: 50px;
	}

	.select-soup-item-l {
		border-radius: 10px 0px 0px 10px;
		width: 120px;
		height: 54px;
		background: $qy-bg-nav-option-color;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.select-soup-item-r {
		border-radius: 0px 10px 10px 0px;
		width: 120px;
		height: 54px;
		// background: $qy-bg-nav-option-color;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.select-soup-item-y {
		background: $uni-text-color-zbt-f;
		color: $uni-text-color;
	}

	.select-soup-item-n {
		background: $qy-bg-nav-option-color;
		color: $uni-text-color-inverse;
	}

	.soup-vie {
		display: flex;
		flex: 1;
		justify-content: center;
	}

	.soup-content {
		// margin-top: 4px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.soup-img {
			position: absolute;
			width: 390px;
			height: 390px;
			margin-top: 10px;
			background-image: url("../../static/nav/soup/Group.png");
			background-size: 100%;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.soup-img-dan {
			position: absolute;
			width: 390px;
			height: 390px;
			// margin-top: 41px;
			background-image: url("../../static/nav/soup/Group_dan.png");
			background-size: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

		}
	}

	.soup-img-name {
		font-size: 16px;
		color: $uni-text-color;
		margin-top: 422px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.name-item-add {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.name-item {
			margin-top: 10px;
		}
	}

	.soupList-src-v {
		display: flex;
		height: 80vh;

		// flex: 1;
		// background-color: red;
	}

	.fill {
		display: flex;
		flex-direction: row;
		width: 390px;
		height: 390px;
		position: relative;

		.fill-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1;

			.fill-item-image {
				width: 170px;
				height: 340px;

			}
		}

	}
</style>